<template>
  <div class="home">
    <!-- <img alt="Vue logo" src="../../assets/logo.png"> -->
    <!-- <HelloWorld msg="Welcome to Your Vue.js App"/> -->
    <div class="banner">
      <van-swipe :autoplay="3000" @change="bannering">
        <van-swipe-item v-for="(img,index) in banner" :key="index">
          <img :src="img"/>
        </van-swipe-item>
        <div slot="indicator" class="dot">
          <div :class="bannerIndex === index?'thisDot':''"
            v-for="(img,index) in banner"
            :key="index"
          />
        </div>
      </van-swipe>
    </div>
    <div class="animation">
      <img src="@/assets/images/home_2.png" alt="img"/>
    </div>
      <!-- 产品预览 -->
    <div class="productBox" >
      <div class="productImg" :style="{'margin-left':productImgMargin+'rem'}">
        <img :src="img.url" v-for="(img,index) in product" :key="index"/>
      </div>
      <div class="productArrow">
        <img src="@/assets/images/home_arrow-left.png" class="productLeft" @click="productLeft"/>
        <img src="@/assets/images/home_arrow-right.png" class="productRight" @click="productRight"/>
      </div>
      <van-row class="productTitle" type="flex" justify="center">
        <van-col span="18" v-for="(item,index) in product" :key="index" v-show="productNameIndex === index">
          {{item.text}}
        </van-col>
      </van-row>
        <van-row class="productName" type="flex" justify="center">
            <van-col span="8" v-for="(item,index) in product" 
        :key="index"
        :class="productNameIndex === index?'productActive':''"
        >
        <div @click="productActive(index)">{{item.name}}</div>
          </van-col>
        </van-row>
    </div>
      <!-- 产品预览结束 -->
    <div class="maskBoxTop">
      <img src="@/assets/images/home_4.png" @click="mask = 10" :style="mask===10?{'transform':'scale(1.1)'}:''" />
      <transition name="masks">
      <div class="mask flex_column" v-show="mask===10"  @click="mask = ''">
        <div class="maskText" :style="mask===10?{'margin-top':0}:''">
          <h4>Self-Powered home. Just add RESS.</h4>
          <p>RESS with SECG to store excess energy generated 
              during the day and makes it available when you need it,
              minimising reliance on the grid.
          </p>
        </div>
      </div>
      </transition>
    </div>
    <!-- 列表 -->
    <div class="home_list">
      <div class="home_list_head flex_column" >
        <h4>Everything Is Possible with RESS</h4>
        <p>RESS provides a complete energy solution by offering various
 optionsfit for your home condition and lifestyle.</p>
      </div>
      <div class="home_list_imgBox">
          <div class="home_list_img" 
          v-for="(item,index) in homeList" 
          :key="index" 
          >
            <img :src="item.url" @click="mask=index" :style="mask === index?{'transform':'scale(1.1)','transition':'1s'}:''" />
            <transition name="masks">
                <div class="home_list_mask mask flex_column" 
                v-show="mask===index"
                @click="mask = ''"
                >
                  <p >{{item.text}}</p>
                </div>
            </transition>
          </div>
      </div>
    </div>
    <!-- 列表结束 -->
    <!-- 下载app -->
    <div class="downloadApp flex_column">
        <h3>Keep an eye on your energy supply: <br/>with the App</h3>
        <p>With the App you'll be able to check your energy usage and 
          production - anytime and from anywhere. Use the App on your smartphone or tablet to monitor, 
          analyse and control the supply and demand of your household.</p>
        <div class="downloadImg">
          <img src="@/assets/images/home_9.png"/>
          <a href="javascript:void(0)" class="goinDownload">
            <img src="@/assets/images/home_arrow-right.png"/>
          </a>
        </div>
    </div>
    <!-- 下载app结束 -->
    <div class="home_about">
      <img src="@/assets/images/home_10.png"/>
      <a href="javascript:void(0)" class="home_about_content flex_column">
        <p>ABOUT US</p>
        <img src="@/assets/images/arrow-right.png"/>
      </a>
    </div>
  </div>
</template>

<script>
// @ is an alias to /src
// import HelloWorld from '@/components/HelloWorld.vue';

export default {
  name: 'home',
  data() {
    return {
      bannerIndex:0,
      banner:[
        require('@/assets/images/home_banner.png'),
        require('@/assets/images/home_banner.png'),
        require('@/assets/images/home_banner.png'),
      ],
      product:[
        {
         url:require('@/assets/images/home_product.png'),
         name:'RESS-5kWh',
         text:'SYSTEM SOLAR ENERGY CONSUMER GOODS'
         },{
         url:require('@/assets/images/home_product.png'),
         name:'RESS-10kWh',
         text:'RESIDENTIAL ENERGY STORAGE SYSTEM SOLAR ENERGY CONSUMER GOODS'
         },{
         url:require('@/assets/images/home_product.png'),
         name:'SECG',
         text:'RESIDENTIAL ENERGY STORAGE SYSTEM SECG'
         }],
      productNameIndex:1,
      productImgMargin:-7.5,
      productImg:[
        require('@/assets/images/home_product.png'),
        require('@/assets/images/home_product.png'),
        require('@/assets/images/home_product.png'),
      ],
      mask:'',
      homeList:[
        {
          url:require('@/assets/images/home_5.png'),
          text:'Combines PV power generation, energy storage and power supply.'
        },{
          url:require('@/assets/images/home_6.png'),
          text:'Combines PV power generation, energy storage and power supply.'
        },{
          url:require('@/assets/images/home_7.png'),
          text:'Combines PV power generation, energy storage and power supply.'
        },{
          url:require('@/assets/images/home_8.png'),
          text:'Combines PV power generation, energy storage and power supply.'
        },
      ]
    }
  },
  components: {
    // HelloWorld,
  },
  methods:{
   masker(i){
    //  this.mask = '';
     console.log(this.mask,i)
   },
    bannering(i){
      this.bannerIndex = i;
    },
    productLeft(){
      if(this.productImgMargin < -14 || this.productNameIndex===2){
        this.productImgMargin = 0;
        this.productNameIndex =0;
      }else{
      this.productImgMargin = this.productImgMargin-7.5;
      this.productNameIndex = this.productNameIndex+1;
      }
    },
    productRight(){
      if(this.productImgMargin > -7.4 || this.productNameIndex===0){
        this.productImgMargin = -15;
        this.productNameIndex =2;
      }else{
      this.productImgMargin = this.productImgMargin+7.5;
      this.productNameIndex = this.productNameIndex-1;
      }
    },
    productActive(i){
      if(i===0){
        this.productImgMargin = 0;
      }
      if(i===1){
        this.productImgMargin = -7.5;
      }
      if(i===2){
        this.productImgMargin = -15;
      }
      this.productNameIndex =i;
    },
  }
};
</script>

<style scoped>
.flex_column{
  display:flex;
  flex-flow:column wrap;
  justify-content:center;
  align-items:center;
  text-align:center;}
/* banner */
.banner {
  position:relative;
}
.banner img{
  width:100%;
  height:4.5rem;
  display:block;

}
.dot{
  width:100%;
  display:flex;
  position:absolute;
  bottom:.3rem; 
  justify-content:center;
}
.dot div{
  width:.3rem;
  height:.3rem;
  border-radius:1rem;
  background:rgba(8,173,207,.6);
  margin:0 .2rem;
  transition:.5s;
}
.thisDot{
  width:.8rem!important;
  background:rgba(8,173,207)!important;
}
/* banner结束 */
.animation{
  background:#f5f5f5;
  padding-bottom:.2rem;
  height:5.75rem;
}
.animation img{
  width:100%;
  height:5.55rem;
}
/* 产品预览 */
.productBox{
  width:100%;
  height:7.1rem;
  position:relative;
  overflow:hidden;
}
.productImg{
  display:flex;
  transition:.5s;
}
.productImg img{
  width:7.5rem;
  height:7.1rem;
  flex-shrink:0;
}
.productArrow{
  display:flex;
  justify-content:space-between;
  align-items:center;
  width:100%;
  height:7.1rem;
  position:absolute;
  left:0;
  top:0;
}
.productArrow img{
  width:2rem;
  height:2rem;
  padding:.7rem;
}
.productTitle{
  position:absolute;
  top:.37rem;
  font-size:.28rem;
  line-height:.36rem;
  text-align:center;
  width:100%;
}
.productName{
  position:absolute;
  bottom:.45rem;
  left:50%;
  width:80%;
  margin-left:-40%;
  font-size:.24rem;
  color:#474646;
  text-align:center;
  font-weight:600;
  border-top:.02rem #08adcf solid;
  border-left:.02rem #08adcf solid;
  border-bottom:.02rem #08adcf solid;
}
.productName div{
  /* width:1.96rem; */
  height:0.56rem;
  line-height:0.56rem;
  text-align:center;
  border-right:.02rem #08adcf solid;
  transition:.5s;
}
.productActive{
  color:#fff;
  background:#08adcf;
}
/* 产品预览结束 */
.maskBoxTop,.maskBoxTop img{
  width:100%;
  height:6rem;
  position:relative;
  color:#fff;
  transition:.5s;
  overflow:hidden;
}
.mask{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background:rgba(0,0,0,0.5);
  transition:.5s;
  color:#fff;
  /* opacity:0; */
}
.maskText{
  /* margin-top:5rem; */
  transition:1s;
}
.mask h4{
  font-size:.3rem;
  font-weight:600;
  margin-bottom:.36rem;
}
.mask p{
  font-size:.24rem;
  line-height:.3rem;
  padding:0 .2rem;
}
.masks-enter-active,.masks-leave-active{
   transition:1s;
}
.masks-enter,.masks-leave-to{
  opacity:0;transform: translateY(1rem);
}

/* 首页列表 */
.home_list{
  padding:.6rem .2rem;
}
.home_list_head{
  text-align:center;
  background:#dce6ee;
  height:2.55rem;
  width:100%;
}
.home_list_head h4{
  font-size:.3rem;
  margin-bottom:.3rem;
}
.home_list_head p{
  font-size:.24rem;
  line-height:.35rem;
  padding:0 .2rem;
}
.home_list_img img,.home_list_img{
  width:100%;
  height:5.2rem;
}
.home_list_img{
  position:relative;
  margin-top:.2rem;
  overflow:hidden;
}
.home_list_mask{
  font-size:.28rem;
  line-height:.4rem;
  padding:0 .2rem;
}
/* 列表结束 */
.downloadApp{
  border-top:.2rem #f5f5f5 solid;
  padding:.6rem .2rem;
  text-align:center;
}
.downloadApp h3{
  font-size:.3rem;
  line-height:.36rem;
}
.downloadApp p{
  font-size:.24rem;
  line-height:.3rem;
  margin:.2rem 0;
}
.downloadApp img{
  width:100%;
  height:5.55rem;
}
.downloadImg{
  position:relative;
  display:flex;
  justify-content:center;
}
.goinDownload{
  position:absolute;
  bottom:.5rem;
}
.goinDownload img{
  
  width:.6rem;
  height:.6rem;
}
/* about */
.home_about{
  position:relative;
}
.home_about>img,.home_about{
  width:100%;
  height:3.15rem;
}
.home_about_content{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
}
.home_about_content p{
  color:#fff;
  font-size:.3rem;
  font-weight:700;
  margin:.2rem;
}
.home_about_content img{
  width:.6rem;
  height:.6rem;
}
/* about结束 */
</style>
